﻿
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<link  href="table.css" rel="Stylesheet"/>
<script type="text/javascript">
var a=2,b=1,c,d=0;
$(function(){

	//$("ul#navi_containTab > li").click(function(event){
	$(".tabNavi1").click(function(event){
			var menuIndex=$(this).index();
			//if(menuIndex=='1')
			//$("#navi_containTab ").append('<li class="tabNavix"> Tab Menu x </li>');
			//$("ul#detail_containTab > li:visible").hide('slide', {direction: 'left'}, 500,function(){			
			c=a;
			a=b;
			b=c;
			//$("ul#detail_containTab > li").eq(menuIndex).show('slide', {direction: 'right'}, 500)});
			$(".detailContent"+a).hide('slide', {direction: 'left'}, 500,function(){			
			$(".detailContent"+b).show('slide', {direction: 'right'}, 500)});
			
	});
	$("ul#navi_containTab2 > li").click(function(event){
	var menuIndex=$(this).index();
			d++;
			$("#navi_containTab ").append('<li class="tabNavi1" stype="{display:none;}" onclick="changetab();"> Tab Menu x </li>');
			$("#b").animate({left: "+=500"}, 2000);
			$("ul#navi_containTab2 > li").show('slide', {direction: 'left'}, 500);
			$("#navi_containTab li").eq(d).show('slide', {direction: 'left'}, 500);
			
	});
});

function changetab(){
c=a;
			a=b;
			b=c;
			//$("ul#detail_containTab > li").eq(menuIndex).show('slide', {direction: 'right'}, 500)});
			$(".detailContent"+a).hide('slide', {direction: 'left'}, 500,function(){			
			$(".detailContent"+b).show('slide', {direction: 'right'}, 500)});
}
</script>
<style type="text/css">  
#formName{
 position: relative;
top: -5;
left: -5;
}
div#i_containTab{
	position:relative;
	display:block;
	width:600px; /* กำหนดความกว้างทั้งหมด   */
	border:1px solid #CCC;
}
ul#navi_containTab{
	list-style:none;
	padding:0;
	margin:0;	
	width:100%;
	background-color:#FCF;
}
ul#navi_containTab2{
	list-style:none;
     
       
	padding:0;
	margin:0;	
	width:100%;
	background-color:#FCF;
}
ul#navi_containTab li{
	display:block;
	float:left;
	height:30px;	
	width:100px;  /* กำหนดความกว้างทั้งหมด  หารด้วยจำนวนเมนูแท็บ  */
	border:0px solid #CCC;
	line-height:25px;
	cursor:pointer;
	text-align:center;
}
ul#navi_containTab2 li{
	display:block;
	float:left;
	height:30px;	
	width:100px;  /* กำหนดความกว้างทั้งหมด  หารด้วยจำนวนเมนูแท็บ  */
	border:0px solid #CCC;
	line-height:25px;
	cursor:pointer;
	text-align:center;
}
/* class รูปแบบของแต่ละเมนู */
.tabNavi1{
	background-color:#9C3;	
}
.tabNavi2{
	background-color:#C93;		
}
.tabNavi3{
	background-color:#FC9;		
}
.tabNavi4{
	background-color:#C9F;		
}
.tabNavi5{
	background-color:#F93;		
}
.tabNavi6{
	background-color:#F93;		
}

ul#detail_containTab{
	list-style:none;
	padding:0;
	margin:0;	
	width:100%;	
}
ul#detail_containTab li{
	float:left;
	width: 650px;
height: 400px;	
}
/* class รูปแบบของแต่ละเนื้อหา */
.detailContent1{
	
	display:block;
}
.detailContent2{
	
	display:none;
}

#b{
style="position:absolute; 

}
</style>  


<div id="i_containTab">
    <ul id="navi_containTab">
        <li class="tabNavi1">Tab Menu 1</li>
    </ul>
	<div id="b" >
	<ul id="navi_containTab2" >
        <li class="tabNavi2">เพิ่ม</li>
    </ul>
	</div>
    <ul id="detail_containTab">
        <li class="detailContent1">
		<div id="formName" style="display: block;">
                <table id="box-table-a">
                    <tbody><tr id="TdIdSt" style="display: table-row;">
                        <td><a id="nameid">รหัสนักศึกษา</a>
                        </td>
                        <td>
                            <input id="tags" name="id_st" type="input" autocomplete="off" onkeyup="IsNumeric(this.value,this)" value="">
                        </td>
                        <td>
                            <div id="status"><input type="hidden" name="idHave" value="ever"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>คำนำหน้า</td>
                        <td>
                            <div id="preName" style="display: none;">
                                <select name="Pre_st" id="Pre_st" disabled="">
                                    <option value="นาย">ศ.</option>
                                    <option value="นาย">ผศ.</option>
                                    <option value="นาย">ว่าที่ร้อยตรี</option>
                                    <option value="นาย">นาย</option>
                                    <option value="นางสาว">นางสาว</option>
                                    <option value="นางสาว">นาง</option>
                                </select>
                            </div>
                            <div id="preName2" style="display: inline;">
                                <select name="Pre_st" id="Pre_st">
                                    <option value="นาย">นาย</option>
                                    <option value="นางสาว">นางสาว</option>
                                    <option value="นางสาว">นาง</option>
                                </select>
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>ชื่อ</td>
                        <td>
                            <!--<div id="txtHint">-->
                            <input name="Bame_st" id="name_st" autocomplete="off" type="text" value="" disabled="">
                            <!--</div>-->
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>สกุล</td>
                        <td>
                            <input name="sname_st" id="sname_st" type="text" disabled="">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>สาขาวิชา</td>
                        <td>
                            <div id="class_st" style="display: inline;">
                                <div class="class_st">
                                    <select name="class_st" id="class_st" width="200">
                                        <option value="เทคโนโลยีการยาง">เทคโนโลยีการยาง</option>
                                        <option value="เทคโนโลยีการประมง">เทคโนโลยีการประมง</option>
                                        <option value="คณิตศาสตร์ประยุกตร์">คณิตศาสตร์ประยุกตร์</option>
                                        <option value="วิทยาศาสตร์การอาหารและโภชนาการ">วิทยาศาสตร์การอาหารและโภชนาการ</option>
                                        <option value="เคมี-ชีววิทยา">เคมี-ชีววิทยา</option>
                                        <option value="เคมีอุตสาหกรรม">เคมีอุตสาหกรรม</option>
                                        <option value="เทคโนโลยีการเกษตร">เทคโนโลยีการเกษตร</option>
                                        <option value="วิศวกรรมเคมี">วิศวกรรมเคมี</option>
                                        <option value="ฟิสิกส์">ฟิสิกส์</option>
                                        <option value="วิทยาศาสตร์นิเทศ">วิทยาศาสตร์นิเทศ</option>
                                        <option>//คณะศึกษาศาสตร์//</option>
                                    </select>
                                </div>
                            </div>
                            <div id="class_st2" style="display: none;">
                                <div class="class_st">
                                    <select name="class_st" id="class_st" width="200">
                                        <option value="เทคโนโลยีการยาง">เทคโนโลยีการยาง</option>
                                        <option value="เทคโนโลยีการประมง">เทคโนโลยีการประมง</option>
                                        <option value="คณิตศาสตร์ประยุกตร์">คณิตศาสตร์ประยุกตร์</option>
                                        <option value="วิทยาศาสตร์การอาหารและโภชนาการ">วิทยาศาสตร์การอาหารและโภชนาการ</option>
                                        <option value="เคมี-ชีววิทยา">เคมี-ชีววิทยา</option>
                                        <option value="เคมีอุตสาหกรรม">เคมีอุตสาหกรรม</option>
                                        <option value="เทคโนโลยีการเกษตร">เทคโนโลยีการเกษตร</option>
                                        <option value="วิศวกรรมเคมี">วิศวกรรมเคมี</option>
                                        <option value="ฟิสิกส์">ฟิสิกส์</option>
                                        <option value="วิทยาศาสตร์นิเทศ">วิทยาศาสตร์นิเทศ</option>
                                    </select>
                                </div>
                            </div>
                            <div id="class_st3" style="display: none;">
                                <input name="Bame_st" id="class_st3" type="text" value="">
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    
                </tbody></table>
            </div></li>
        <li class="detailContent2">
		<div id="formName" style="display: block;">
                <table id="box-table-a">
                    <tbody><tr id="TdIdSt" style="display: table-row;">
                        <td><a id="nameid">รหัสนักศึกษา</a>
                        </td>
                        <td>
                            <input id="tags" name="id_st" type="input" autocomplete="off" onkeyup="IsNumeric(this.value,this)" value="">
                        </td>
                        <td>
                            <div id="status"><input type="hidden" name="idHave" value="ever"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>คำนำหน้า</td>
                        <td>
                            <div id="preName" style="display: none;">
                                <select name="Pre_st" id="Pre_st" disabled="">
                                    <option value="นาย">ศ.</option>
                                    <option value="นาย">ผศ.</option>
                                    <option value="นาย">ว่าที่ร้อยตรี</option>
                                    <option value="นาย">นาย</option>
                                    <option value="นางสาว">นางสาว</option>
                                    <option value="นางสาว">นาง</option>
                                </select>
                            </div>
                            <div id="preName2" style="display: inline;">
                                <select name="Pre_st" id="Pre_st">
                                    <option value="นาย">นาย</option>
                                    <option value="นางสาว">นางสาว</option>
                                    <option value="นางสาว">นาง</option>
                                </select>
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>ชื่อ</td>
                        <td>
                            <!--<div id="txtHint">-->
                            <input name="Bame_st" id="name_st" autocomplete="off" type="text" value="" disabled="">
                            <!--</div>-->
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>สกุล</td>
                        <td>
                            <input name="sname_st" id="sname_st" type="text" disabled="">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>สาขาวิชา</td>
                        <td>
                            <div id="class_st" style="display: inline;">
                                <div class="class_st">
                                    <select name="class_st" id="class_st" width="200">
                                        <option value="เทคโนโลยีการยาง">เทคโนโลยีการยาง</option>
                                        <option value="เทคโนโลยีการประมง">เทคโนโลยีการประมง</option>
                                        <option value="คณิตศาสตร์ประยุกตร์">คณิตศาสตร์ประยุกตร์</option>
                                        <option value="วิทยาศาสตร์การอาหารและโภชนาการ">วิทยาศาสตร์การอาหารและโภชนาการ</option>
                                        <option value="เคมี-ชีววิทยา">เคมี-ชีววิทยา</option>
                                        <option value="เคมีอุตสาหกรรม">เคมีอุตสาหกรรม</option>
                                        <option value="เทคโนโลยีการเกษตร">เทคโนโลยีการเกษตร</option>
                                        <option value="วิศวกรรมเคมี">วิศวกรรมเคมี</option>
                                        <option value="ฟิสิกส์">ฟิสิกส์</option>
                                        <option value="วิทยาศาสตร์นิเทศ">วิทยาศาสตร์นิเทศ</option>
                                        <option>//คณะศึกษาศาสตร์//</option>
                                    </select>
                                </div>
                            </div>
                            <div id="class_st2" style="display: none;">
                                <div class="class_st">
                                    <select name="class_st" id="class_st" width="200">
                                        <option value="เทคโนโลยีการยาง">เทคโนโลยีการยาง</option>
                                        <option value="เทคโนโลยีการประมง">เทคโนโลยีการประมง</option>
                                        <option value="คณิตศาสตร์ประยุกตร์">คณิตศาสตร์ประยุกตร์</option>
                                        <option value="วิทยาศาสตร์การอาหารและโภชนาการ">วิทยาศาสตร์การอาหารและโภชนาการ</option>
                                        <option value="เคมี-ชีววิทยา">เคมี-ชีววิทยา</option>
                                        <option value="เคมีอุตสาหกรรม">เคมีอุตสาหกรรม</option>
                                        <option value="เทคโนโลยีการเกษตร">เทคโนโลยีการเกษตร</option>
                                        <option value="วิศวกรรมเคมี">วิศวกรรมเคมี</option>
                                        <option value="ฟิสิกส์">ฟิสิกส์</option>
                                        <option value="วิทยาศาสตร์นิเทศ">วิทยาศาสตร์นิเทศ</option>
                                    </select>
                                </div>
                            </div>
                            <div id="class_st3" style="display: none;">
                                <input name="Bame_st" id="class_st3" type="text" value="">
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    
                </tbody></table>
            </div></li>
        
		
    </ul>
</div>